<template>
	<div class="storeList">
    <!--搜索模块-->
    <search-part @change="cityChangeFn" @searchStore="searchStoreFn" @getLoaction="getLoactionFn"></search-part>
    
    <!--店铺分类-->
    <cate-part :cateLists="cateLists" :showIndex="showIndex" @cateChange="cateChange" v-if="showCatePart"></cate-part>
    
    <!-- <div class="tips">请选择您就近的店铺取货</div> -->
    
    <!--门店列表-->
    <store-part ref="storeParts" @pushCateList="pushCateList" class="store-part"></store-part>
  </div>
</template>

<script>
  import Vue from 'vue'
  import searchPart from './searchPart'
  import catePart from './catePart'
  import storePart from './storePart'
  import Storage from '@/utils/store.js'
  export default Vue.extend({
    name: 'index',
    components: {
      searchPart,
      catePart,
      storePart
    },
    data() {
      return {
        cateLists: [], // 分类列表
        storeList: [], // 门店列表
        showIndex: 7,
        showAll: false,
        postData: {
          id: '',
          supplier_id: '',
          shop_name: '',
          cid: '',
          p: 1,
          group_id: 'no_group_id',
          latitude: '',
          longitude: ''
        },
        showCatePart: true
      }
    },
    watch: {
      $route: {
        handler(val, oldVal) {
          const group_id = this.$route.query.group_id
          const cid = this.$route.query.cid
          const supplier_id = this.$route.query.id
          this.postData.group_id = group_id
          this.postData.cid = cid
          if ((Storage.fetchLocal('isShowSelfStore') && Storage.fetchLocal('isShowSelfStore') == 1)) {
            this.showCatePart = false
            this.postData.supplier_id = supplier_id
          }
          this.postData.p = 1
          this.$refs.storeParts.storeListPost(this.postData)
        }
      }
    },
    mounted() {
      const group_id = this.$route.query.group_id
      const cid = this.$route.query.cid
      const supplier_id = this.$route.query.id
      if (group_id) {
        this.postData.group_id = group_id
      }
      if (cid) {
        this.postData.cid = cid
      }
      if ((Storage.fetchLocal('isShowSelfStore') && Storage.fetchLocal('isShowSelfStore') == 1) && supplier_id) {
        this.showCatePart = false
        this.postData.supplier_id = supplier_id
      }
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.$refs.storeParts.onLoad()
      })
    },
    methods: {
      // search抛出的经纬度
      getLoactionFn(val) {
        // // console.log(val)
        this.postData.latitude = val.lat
        this.postData.longitude = val.lng
        this.$refs.storeParts.storeListPost(this.postData)
      },
      // 选择城市抛出的城市id
      cityChangeFn(val) {
        this.postData.city_id = val.cityCode
        this.postData.latitude = ''
        this.postData.longitude = ''
        this.$refs['storeParts'].storeListPost(this.postData)
      },
      // 抛出的门店分类数据
      pushCateList(val) {
        if (this.$route.query.cate_type === 'all') {
          this.cateLists = val.all_cate
        } else {
          this.cateLists = val.cate_lists
        }
        this.cateData = val
      },
      // 点击分类抛出分类id
      cateChange(val) {
        if (val == 'all') {
          this.cateLists = this.cateData.all_cate
          this.showAll = !this.showAll
          this.showIndex = this.showAll ? 50 : 7
        } else {
          this.postData.cid = val
          this.postData.p = 1
          // this.$refs.storeParts.storeListPost(this.postData)
          this.showIndex = 7
        }
      },
      // 输入框搜索事件
      searchStoreFn(val) {
        this.postData.p = 1
        this.postData.shop_name = val
        // this.$refs.storeParts.storeList = []
        this.$refs.storeParts.storeListPost(this.postData)
      }
    }
  })
</script>

<style lang="scss">
  .storeList{
    // .tips{
    //   padding: 20px;
    //   text-align: center;
    //   color: #999;
    // }
    .store-part{
      padding-top:20px;
    }
  }
</style>
